<template>
  <div>
    <van-nav-bar
      title="返料管理"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- right-text="新建" -->
    <!-- @click-right="onClickRight" -->
    <van-search
      placeholder="请输入客户名称"
      @search="search"
      v-model="queryParam.Keyword"
      @clear="clear"
    />
    <van-empty v-show="this.data.length == 0" description="空" />
    <div class="returnMaterialBox">
      <div
        @click="Edit(item.Id)"
        class="returnMaterial"
        v-for="item in data"
        :key="item.Id"
      >
        <van-swipe-cell>
          <template #right>
            <van-icon
              class="delete"
              @click.stop="btn([item.Id])"
              name="delete"
            />
          </template>
          <div class="Father">
            <div class="state">
              <div class="companyName">返料单号：{{ item.CustomerId }}</div>
              <div>
                <van-tag
                  v-if="item.ApprovalStatus == 1"
                  size="large"
                  style="margin:10px 10px 0 0"
                  plain
                  type="primary"
                  >{{ "已审批" }}</van-tag
                >
                <van-tag
                  v-if="item.ApprovalStatus == 2"
                  size="large"
                  style="margin:10px 10px 0 0"
                  plain
                  type="primary"
                  >{{ "审批驳回" }}</van-tag
                >
                <van-tag
                  v-if="!item.ApprovalStatus"
                  size="large"
                  style="margin:10px 10px 0 0"
                  plain
                  type="primary"
                  >{{ "未审批" }}</van-tag
                >
              </div>
            </div>
            <div class="DocumentNo">{{ item.CustomerName }}</div>
            <div class="AccountingStartDate">
              <span style="margin-left:10px">
                起始时间：{{
                  item.AccountingStartDate
                    ? item.AccountingStartDate.substring(0, 10)
                    : item.AccountingStartDate
                }}</span
              >
              <span class="time">
                结束时间：{{
                  item.AccountingEndDate
                    ? item.AccountingEndDate.substring(0, 10)
                    : item.AccountingEndDate
                }}</span
              >
            </div>
          </div>
        </van-swipe-cell>
      </div>
    </div>

    <PaginationCom :pagination="pagination" :Total="Total" :thisOjb="this" />
    <Edit :parentObj="this" ref="edit" />
  </div>
</template>

<script>
import PaginationCom from "../../components/PaginationCom.vue";
import { Card } from "vant";
import {
  Search,
  Tag,
  NavBar,
  Dialog,
  Pagination,
  Empty,
  SwipeCell,
  Icon
} from "vant";
import Edit from "./Edit.vue";
export default {
  components: {
    "van-tag": Tag,
    PaginationCom,
    "van-icon": Icon,
    "van-swipe-cell": SwipeCell,
    "van-empty": Empty,
    "van-pagination": Pagination,
    "van-nav-bar": NavBar,
    "van-card": Card,
    "van-search": Search,
    Edit
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 15,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ["15", "30", "60"], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      Total: 0,
      Keyword: "",
      data: [],
      queryParam: {}
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    paginationchange(a) {
      // a:当前选中页码
      this.pagination.current = a;
      this.getDataList();
    },
    btn(id) {
      Dialog.confirm({
        message: "确定要删除吗"
      })
        .then(() => {
          this.http
            .post("/GiftManagement/GMM_GiftMaterialApplyMain/DeleteData", id)
            .then(resJson => {
              if (resJson.Success) {
                this.$toast("删除成功");
                this.getDataList();
              } else {
                this.$toast("删除失败");
              }
            });
        })
        .catch(() => {
          console.log(123);
        });
    },
    clear() {
      console.log(123);
      this.queryParam = {};
      this.getDataList();
    },

    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$refs.edit.openForm();
    },
    //弹出页面
    Edit(Id) {
      this.$refs.edit.openForm(Id);
    },
    //搜索
    search(value) {
      console.log(value);
      this.queryParam.Condition = "CustomerName";
      this.queryParam.Keyword = value;
      this.getDataList();
    },

    getDataList() {
      this.selectedRowKeys = [];

      this.loading = true;
      this.http
        .post(
          "/GiftManagement/GMM_GiftMaterialApplyMain/GetDataListByMySelfAndMoreCondition",
          {
            PageIndex: this.pagination.current,
            PageRows: this.pagination.pageSize,
            SortField: "Id",
            SortType: "asc",
            Search: this.queryParam
          }
        )
        .then(resJson => {
          this.data = resJson.Data;
          this.Total = resJson.Data.Total;
          // console.log(this.data);
        });
    }
  }
};
</script>

<style scoped>
.state {
  display: flex;
  justify-content: space-between;
}
.pagination {
  position: absolute;
  bottom: 5px;
  right: 20%;
}
.delete {
  padding-top: 10px;
  background-color: #fff;
  padding-right: 20px;
  height: 60px;
  font-size: 60px;
  color: red;
}
.DocumentNo {
  margin-left: 10px;
  font-size: 18px;
}
.AccountingStartDate {
  display: flex;
  justify-content: space-between;
}
.btn {
  position: absolute;
  bottom: 0;
  right: 0;
}
.returnMaterialBox {
  height: calc(100vh - 140px);
  padding-bottom: 60px;
  box-sizing: border-box;
  overflow: auto;
}
.time {
  margin-right: 10px;
  padding-bottom: 10px;
}
.companyName {
  /* padding-top: 8px; */
  margin-top: 10px;
  margin-left: 10px;
}
.returnMaterial {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  position: relative;
  width: 95%;
  /* height: 85px; */
  /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; */
  margin: 0 auto;
  margin-bottom: 10px;
  /* background-color: #7bbfea; */
  /* border-radius: 10px 10px 0 0; */
}
img {
  width: 100px;
  height: 100px;
}
/* .Father {
  display: flex;
} */
</style>
